<template>
    <div class="page order">
        <!-- <div class="header">
            <h1>抢单</h1>
        </div> -->
        <b-scroll ref="bscroll"  @load="load" :data="itemarr" :nomore="nomore">
            <div slot="scroll">
                <div class="order-list">
                    <ul>
                        <li v-for="item in itemarr">
                            <div class="order-item">
                                <div class="item1">
                                    <div class="left">
                                        <h1 class="font-normal font-color-normal">订单编号：{{item.system_order_no}}</h1>
                                    </div>
                                    <div class="right">
                                        <!-- <span class="more"></span> -->
                                    </div>
                                </div>
                                <div class="item">
                                    <div class="flex-wrap2">
                                        <div class="flex-item-left right">
                                            <h1 class="font-normal font-color-normal">下单</h1>
                                            <p class="font-normal font-color-shallow">{{item.order_time}}</p>
                                        </div>
                                        <div class="flex-item-center right">
                                            <h1 class="font-small font-color-normal"><span>取</span>{{item.shop_info.address}}</h1>
                                            <h1 class="font-normal font-color-normal"><span class="red">送</span>{{item.receiver_address}}</h1>
                                        </div>
                                        <div class="flex-item-right">
                                            <p class="font-20 font-color-normal money">{{item.deliver_fee}}<span class="font-small">元</span></p>
                                        </div>
                                    </div>
                                </div>
                                <div class="btn-center">
                                    <x-button class="btn-blue" @click.native="qiangdan(item.id,item.system_order_no)">抢单</x-button>
                                </div>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </b-scroll>
        
    </div>
</template>

<script>
import { Group, Cell,XButton } from 'vux'
import bScroll from 'components/common/bScroll.vue'
export default {
    data(){
        return{
            itemarr:[],
            currentPage : 1,
            pagesize : 5,
            maxpage:0,
            nomore:false
        }
    },
    components: {
        Group,
        Cell,
        XButton,
        bScroll
    },
    mounted(){
        this.initdata()
    },
    methods:{
        qiangdan(id,no){
            let token = localStorage.getItem("access_token");
            let params = {"access_token": token,"order_id" : id,"order_no" : no}
            this.ajaxplugin("/Deliver/accept_order",params,(res) => {
                if(res.result == 'success'){
                    this.$router.replace('/task/item/0')
                }
            })
        },
        initdata(){
            this.itemarr = []
            let token = localStorage.getItem("access_token");
            let params = {"access_token": token,"page" : this.currentPage,"pagesize":this.pagesize}
            this.ajaxplugin("/Deliver/order_list",params,(res) => {
                this.maxpage = res.data.total_page
                let arr = res.data.task_list
                console.log(arr)
                console.log(this.maxpage)
                if(arr != ''){
                    this.$store.dispatch('hideNodata') 
                    this.nodata = false
                    this.itemarr = arr
                    this.$nextTick(() => {
                        //dom更新了 可以调用better-scroll了
                        this.$refs.bscroll.initScroll();
                    })
                    this.currentPage = this.currentPage+1;
                }else{
                    this.itemarr = []
                    this.nodata = true
                    this.$store.dispatch('showNodata') 
                }
                
            })
        },
        load(){
            if(this.currentPage<=this.maxpage){
                this.nomore = false;
                let token = localStorage.getItem("access_token");
                let params = {"access_token": token,"page" : this.currentPage,"pagesize":this.pagesize}
                this.ajaxplugin("/Deliver/order_list",params,(res) => {
                    let arr = res.data.task_list
                    if(this.itemarr == ''){
                        this.itemarr = arr ; 
                    }else{
                        for(let item of arr){
                            this.itemarr.push(item)
                        }
                    }
                    this.$nextTick(() => {
                      //dom更新了 可以调用better-scroll了
                      this.$refs.bscroll.initScroll();
                    })
                    this.currentPage = this.currentPage+1;
                })
            }else{
                this.nomore = true;
            }
        }
    }
}
</script>

<style lang="stylus" scoped>
.order
 .order-list
  .order-item
    padding 0 10px
    background #ffffff
    margin-bottom 10px
    .flex-wrap2
        border-bottom 1px solid #eeeeee
        padding 10px 0
    .item
        .right
            border-right 1px solid #eeeeee
        h1
            line-height: 30px
            margin: 5px 10px
            span 
                padding: 5px 7px
                background: #0093f9
                color: #fff
                border-radius: 50%
                margin-right: 5px
                &.red
                    background #f94c00
        .money
            line-height 70px
</style>
